<template>
  <div class="chat-msg-item">
    <div class="chat-msg-normal" :class="{ 'chat-msg-mine': mine }">
      <slot name="mine-avatar"></slot>
      <div class="chat-msg-content">
        <div class="chat-msg-bottom">
          <div ref="chatMsgBox">
            <span class="chat-msg-text">{{ message.content }}</span>
         
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mine: {
      type: Boolean,
      required: true
    },
    message: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>
<style lang="less" scoped>
.chat-msg-item {
  .chat-msg-normal {
    position: relative;
    font-size: 0;
    padding-left: 10px;
    min-height: 50px;
    margin-top: 10px;

  

    .chat-msg-content {
      text-align: left;

      .send-fail {
        color: #e60c0c;
        font-size: 30px;
        cursor: pointer;
        margin: 0 20px;
      }

      .chat-msg-top {
        display: flex;
        flex-wrap: nowrap;
        color: #333;
        font-size: 14px;
        line-height: 20px;

        span {
          margin-right: 12px;
        }
      }

      .chat-msg-bottom {
        display: inline-block;
        padding-right: 300px;

        .chat-msg-text {
          display: block;
          position: relative;
          line-height: 26px;
          margin-top: 3px;
          padding: 7px;
          background-color: white;
          border-radius: 10px;
          color: black;
          display: block;
          font-size: 14px;
          text-align: left;
          white-space: pre-wrap;
          word-break: break-all;
          box-shadow: 1px 1px 1px #c0c0f0;

          &:after {
            content: '';
            position: absolute;
            left: -10px;
            top: 13px;
            width: 0;
            height: 0;
            border-style: solid dashed dashed;
            border-color: white transparent transparent;
            overflow: hidden;
            border-width: 10px;
          }
        }
        .chat-msg-status {
          display: block;

          .chat-readed {
            font-size: 12px;
            color: #888;
            font-weight: 600;
          }

          .chat-unread {
            font-size: 12px;
            color: #f23c0f;
            font-weight: 600;
          }
        }

        .chat-receipt {
          font-size: 13px;
          color: blue;
          cursor: pointer;

          .icon-ok {
            font-size: 20px;
            color: #329432;
          }
        }
      }
    }

    &.chat-msg-mine {
      text-align: right;
      padding-left: 0;
      padding-right: 60px;

      .head-image {
        left: auto;
        right: 0;
      }

      .chat-msg-content {
        text-align: right;

        .chat-msg-top {
          flex-direction: row-reverse;

          span {
            margin-left: 12px;
            margin-right: 0;
          }
        }

        .chat-msg-bottom {
          padding-left: 180px;
          padding-right: 25px;

          .chat-msg-text {
            margin-left: 10px;
            background-color: rgb(88, 127, 240);
            color: #fff;
            vertical-align: top;
            box-shadow: 1px 1px 1px #ccc;

            &:after {
              left: auto;
              right: -10px;
              border-top-color: rgb(88, 127, 240);
            }
          }

          .chat-realtime {
            flex-direction: row-reverse;

            .iconfont {
              transform: rotateY(180deg);
            }
          }
        }
      }
    }
  }
}
</style>
